<template>
  <div class="graph-opt">
    <el-button type="primary" @click="goBack">返回</el-button>
    <div>
      <el-button type="primary" @click="onClear">清除</el-button>
      <el-button type="primary" @click="onBack">回退</el-button>
      <el-button type="primary" @click="onRevert">还原</el-button>
      <el-button type="primary" @click="onSave">保存</el-button>
    </div>
  </div>
</template>
<script setup>
import { useRouter } from 'vue-router';
import { useGraphData } from '@/store';
const graphDataStore = useGraphData();

const props = defineProps({
  graph: {},
});

const router = useRouter();
const goBack = () => {
  router.back();
};
const onClear = () => {
  props.graph.clearCells();
};
const onBack = () => {
  if (props.graph.canUndo()) {
    props.graph.undo();
  }
};
const onRevert = () => {
  if (props.graph.canRedo()) {
    props.graph.redo();
  }
};
const onSave = () => {
  graphDataStore.setData(props.graph.toJSON());
};
</script>
<style lang="less" scoped>
.graph-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 10px;
}
</style>
